import React, { useState, useEffect } from 'react'
import styles from './countDown.less'
import dayjs from 'dayjs'


const fillZero = (val: string) => {
    return val.length < 2 ? "0" + val : val
}
const transform = (sec: number) => {
    let s = fillZero(String(sec % 60))
    let m = fillZero(String(Math.floor(sec / 60)))
    let h = fillZero(String(Math.floor(sec / 3600)))
    return { s, h, m }
}

interface Props {
    sec: number
    onDone: () => void
}
export default (props: Props) => {
    let [sec, setSec] = useState(props.sec);
    useEffect(() => {
        let inx = setInterval(() => {
            sec > 0 ? setSec(sec - 1) : props.onDone()
        }, 1000)
        return () => clearInterval(inx)
    }, [sec])
    let time = transform(sec)
    return (
        <div className={styles.time}>
            <span>{time.h}</span>
            <i>:</i>
            <span>{time.m}</span>
            <i>:</i>
            <span>{time.s}</span>
        </div>
    )
}